<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="http://at.alicdn.com/t/font_1435514_lxxm9rqror.css" rel="stylesheet">
    <style>
        body {
            color: #606266;
            width: 100%;
        }
        header {
            margin-top: 2px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: white;
            overflow: hidden;
        }
        header span,
        header p {
            display: inline-block;
            padding: 0 10px;
        }
        header p {
            float: right;
            color: red;
            margin-right: 4%;
            cursor: pointer;
        }
        main {
            width: 94.5%;
            padding: 2%;
            margin: 10px;
            font-size: 14px;
            background-color: white;
        }
        aside {
            overflow: hidden;
        }
        main p {
            width: 94%;
            margin: 10px 0;
            color: #999;
            padding: 0px 0 10px 20px;
            border-bottom: 1px solid #dcdfe6;
        }
        main input,
        main select {
            height: 35px;
            border: 1px solid #dcdfe6;
        }
        main ul {
            width: 100%;
        }
        main li {
            height: 36px;
            padding: 10px 0;
            overflow: hidden;
        }
        main li>div {
            float: left;
        }
        main li span {
            float: left;
        }
        main li div div {
            float: left;
        }
        main li>div span {
            display: inline-block;
            height: 36px;
            line-height: 36px;
            width: 25%;
            text-align: right;
            padding-right: 5%;
        }
        main li>div div {
            width: 68%;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
        }
        main input,
        main select {
            width: 95%;
            border: none;
            padding-left: 5%;
            outline: none;
            border-radius: 5px;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #abacb1;
        }
        main select {
            width: 100%;
        }
        .three>div {
            width: 32.5%;
        }
        main li>div {
            width: 49%;
        }
        .left ul:last-of-type li>div {
            width: 110%;
        }
        .left ul:last-of-type li span {
            width: 15%;
        }
        .left {
            float: left;
            width: 48%;
        }
        .right {
            float: right;
            width: 48%;
        }
        .bottom {
            width: 100%;
            background-color: white;
        }
        .bottom ul {
            display: none;
        }
        .bottom li:last-of-type {
            height: 100px;
        }
        .bottom span {
            width: 6%;
        }
        .bottom li>div {
            width: 100%;
        }
        .bottom li:first-of-type>div div {
            width: 20%;
        }
        .bottom li:last-of-type>div div {
            width: 88%;
            height: 100px;
        }
        .bottom textarea {
            width: 100%;
            height: 90px;
            border: none;
            font-size: 14px;
            padding: 10px 0px 0px 0px;
            margin: 0;
            text-indent: 1.5em;
            border-radius: 5px;
        }
        footer p,
        footer a {
            width: 97%;
            border: 1px dashed #dcdfe6;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }
        footer p:hover {
            background-color: #d3d3d3;
            color: #4eaf9d;
            border-color: #4eaf9d;
        }
        footer a {
            border: none;
            background-color: #429788;
            width: 250px;
            height: 36px;
            line-height: 36px;
            display: block;
            color: white;
            margin: auto;
        }
        footer a:hover {
            background-color: #3dbea7;
        }
        footer span {
            margin-right: 10px;
            font-weight: 700;
        }
        .radio input{
            width:14px;
            height:14px;
            margin-top:2px;
            vertical-align: top;
        }
        .radio i{
            margin-top:1px;
            display: block;
            font-size:12px;
            height:18px;
            line-height:18px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <span>学生管理</span>/
        <span>学生列表</span>
        <p><em class="icon iconfont icon-bianji"></em>修改信息</p>
    </header>
    <main>
        <aside>
            <div class="left public">
                <p>基本信息</p>
                <ul>
                    <li class="three">
                        <div>
                            <span>姓名</span>
                            <div><input type="text" placeholder="请输入姓名" id="studentName"></div>
                        </div>
                        <div>
                            <span>性别</span>
                            <div>
                                <select name="性别" id="studentSex">
                                    <option disabled selected hidden>性别</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>年龄</span>
                            <div><input type="number" id="studentAge" placeholder="年龄" min="0" max="100"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>电话</span>
                            <div><input type="text" id="studentPhone" placeholder="请输入电话"></div>
                        </div>
                        <div>
                            <span>微信号</span>
                            <div><input type="text" id="studentWX" placeholder="请输入微信号"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>QQ</span>
                            <div><input type="text" id="studentQQ"placeholder="请输入QQ"></div>
                        </div>
                        <div>
                            <span>意向学科</span>
                            <div>
                                <select  name="请选择学科" id="subject">
                                    <option>Javaee</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="width: 110%;">
                            <span style="width: 15%;">身份证号</span>
                            <div><input type="text" id="studentSFZ" placeholder="请输入身份证号"></div>
                        </div>
                    </li>
                </ul>
                <p>紧急联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>姓名</span>
                            <div><input type="text" id="emergencyName" placeholder="紧急联系人姓名"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>电话</span>
                            <div><input type="text" id="emergencyTelephone" placeholder="紧急联系人电话"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>与本人关系</span>
                            <div>
                                <select name="与本人关系" id="relationship">
                                    <option disabled selected hidden>与本人关系</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right public">
                <p>学校信息</p>
                <ul>
                    <li>
                        <div>
                            <span>学校名称</span>
                            <div>
                                <select name="学校名称" id="schoolName">
                                    <option disabled selected hidden>请输入学校名称</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>学制</span>
                            <div><input type="text" id="educationSystme" placeholder="请输入学制"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>专业</span>
                            <div><input type="text" id="major" placeholder="请输入专业"></div>
                        </div>
                        <div>
                            <span>年级</span>
                            <div><input type="text" id="studentGarde" placeholder="请输入年级"></div>
                        </div>
                    </li>
                </ul>
                <p>学生记录</p>
                <ul>
                    <li>
                        <div>
                            <span>学生来源</span>
                            <div>
                                <select name="学生来源" id="studentss">
                                    <option>学生来源</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>缴费方式</span>
                            <div>
                                <select name="缴费方式" id="payment">
                                    <option>支付宝</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>学费金额</span>
                            <div><input type="text" placeholder="21800" disabled></div>
                        </div>
                        <div>
                            <span>意向类型</span>
                            <div>
                                <select name="请输入意向类型"">
                                    <!-- <option value="" disabled selected hidden>请输入意向类型</option> -->
                                    <option value="">读博</option>
                                    <option value="">考研</option>
                                    <option value="">就业</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
                <p>口碑联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>校区</span>
                            <div>
                                <select name="校区" id="schools">
                                    <option>校区</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span id="Radio" class="radio">
                                <i><input type="radio" id="dept" name="go">员工</i>
                                <i><input type="radio" id="class" name="go">班级</i>
                            </span>
                            <div>
                                <select name="员工/班级" id="classs">
                                    <!-- <option value="" disabled selected hidden>员工/班级</option> -->
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>姓名</span>
                            <div>
                                <select name="姓名" id="names">
                                    <!-- <option value="" disabled selected hidden>姓名</option> -->
                                    <option value="">小张</option>
                                    <option value="">小王</option>
                                    <option value="">小李</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>联系电话</span>
                            <div>
                                <select name="联系电话" id="tel">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </aside>
        <div class="bottom">
            <p>记录信息</p>
            <ul>
                <li>
                    <div>
                        <span>记录类型</span>
                        <div>
                            <select data-searchplaceholder="搜索分类" id="jilu">
                                <option value="" disabled selected hidzden>记录类型</option>
                                <option value="">A类</option>
                                <option value="">B类</option>
                                <option value="">C类</option>
                                <option value="">D类</option>
                                <option value="">直接就业</option>
                                <option value="">专升本</option>
                                <option value="">考公务员</option>
                                <option value="">考研</option>
                                <option value="">考博</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>记录内容</span>
                        <div><textarea placeholder="请录入记录详情"></textarea></div>
                    </div>
                </li>
            </ul>
        </div>
        <footer>
            <p><span class="icon iconfont icon-tianjia"></span>添加记录</p>
            <a href="Student.html"><span class="icon iconfont icon-tijiao1"></span>提交</a>
        </footer>
    </main>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    var studentURL = 'http://192.168.3.27:9999/'
    // 点击查看过来的数据
    var search =   window.location.search.match(/\d+/g)[0];
    window.onload = function(){
        if (localStorage.getItem("ONOFF") === 'true') {
            $('input,textarea').prop('readonly', 'true');
            $('select').prop('disabled', 'disabled');
            $("footer").css('display', 'none');
            //修改信息
            $('header p').on('click', function () {
                $('input,textarea').removeAttr('readonly');
                $('select').removeAttr('disabled', 'disabled');
                $("footer").css('display', 'block');
            })
        }
        var studentLookURL = studentURL + "oaSystem/lookStu"
        $.ajax({
            url:studentLookURL,
            dataType:"json",
            type:"post",
            data:{
                studentId:search,
                method:'look'
            },
            success:function(data){
                console.log(data);
                $('#studentName').val(data.result[0].studentName);//姓名
                $('#studentAge').val(data.result[0].age);//年龄
                $('#studentPhone').val(data.result[0].telphone);//电话
                $('#studentWX').val(data.result[0].weixin);//微信
                $('#studentQQ').val(data.result[0].qq);//QQ
                $('#studentSFZ').val(data.result[0].idCard);//身份证号
                $('#emergencyName').val(data.result[0].emergencyName);//紧急联系人姓名
                $('#emergencyTelephone').val(data.result[0].emergencyContact);//紧急联系人电话
                $('#educationSystme').val(data.result[0].eductionalSystme);//学制
                $('#major').val(data.result[0].major);//专业
                $('#studentGarde').val(data.result[0].studentGrade);//年级
                $('input:eq(11)').val(data.result[0].money);//学费
                $('#tel').val(data.result[0].WomTel);//口碑联系人电话
                if (data.result[0].studentSex == '2') {
                    $('#studentSex option:eq(0)').html("女");
                } else {
                    $('#studentSex option:eq(0)').html("男");
                }// 性别
                $('#subject option:eq(0)').html(data.result[0].subjectName);//意向学科
                // $('#subject').val(data.result[0].subjectName);
                $('#schoolName option:eq(0)').html(data.result[0].schoolName);//学校名称
                $('#studentss option:eq(0)').html(data.result[0].sourceName);//学生来源
                switch (data.result[0].payment) {
                    case 1:
                        $('#payment option:eq(0)').html("支付宝");
                    case 2:
                        $('#payment option:eq(0)').html("微信");
                    case 3:
                        $('#payment option:eq(0)').html("现金");
                }//支付方式
                $('#relationship option:eq(0)').html(data.result[0].relationship);//与本人关系
                $('#schools option:eq(0)').html(data.result[0].centreName);//口碑人校区
                $('#classs option').html(data.result[0].deptName);//员工
                $('#names option').html(data.result[0].empName);//姓名
                $('#tel option').html(data.result[0].womTel);//联系电话
            }
        })
    }
    //检索localStorage
    //查看
    
    //跳转添加
    if (localStorage.getItem("ONOFF1") === 'true') {
        $('header p').css('display', 'none');
    }
    //编辑
    if (localStorage.getItem("ONOFF0") === 'true') {
        $('input,textarea').removeAttr('readonly', 'true');
        $('select').removeAttr('disabled', 'disabled');
        $("footer").css('display', 'block');
    }
    //添加
    $('footer p:eq(0)').on('click', function () {
        $('.bottom ul').css('display', 'block');
    })
</script>
</html>